<template>
  <div class="tools-btn-box">
    <span v-text="toolsData.title" />
    <div>
      <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <template v-for="item in oBtn">
      <el-tooltip
        class="item"
        :key="item.id"
        effect="dark"
        :content="item.content"
        placement="bottom"
      >
        <el-button
          :class="item.class"
          v-if="test(item.id)"
          :type="item.type"
          size="mini"
          plain
          @click="item.fn"
          v-text="item.name"
        />
      </el-tooltip>
    </template>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import { Message } from "element-ui";
import XLSX from "xlsx";
export default {
  name: "ToolsBtn",
  props: {
    toolsData: {
      type: Object,
      default() {
        return {
          cardTitle: "标 题",
          btn0: false, // 新增按钮
          btn1: false, // 刷新按钮
          btn2: false, // 搜索按钮
          btn3: false, // 设置按钮
          btn4: false // 导出Excel按钮
        };
      }
    }
  },
  data() {
    return {
      oBtn: [
        {
          id: 0,
          name: "新 增",
          content: "添加新数据",
          class: "add-btn card-tools-btn",
          type: "success",
          show: true,
          fn: () => this.$emit("addData")
        },
        {
          id: 1,
          name: "刷 新",
          content: "点击刷新列表数据",
          class: "res-btn card-tools-btn",
          type: "success",
          show: true,
          fn: () => this.$emit("refresh")
        },
        {
          id: 3,
          name: "设 置",
          content: "设置表格列显示隐藏",
          class: "fieldSet-btn card-tools-btn",
          type: "warning",
          show: true,
          fn: () => this.$emit("fieldSet")
        },
        {
          id: 4,
          name: "导 出",
          content: "点击导出Excel表格",
          class: "export-btn card-tools-btn",
          type: "primary",
          show: false,
          fn: () => this.exportExcel()
        },
        {
          id: 2,
          name: "搜 索",
          content: "按查询条件搜索数据",
          class: "search-btn card-tools-btn",
          type: "primary",
          show: true,
          fn: () => this.$emit("search")
        }
      ]
    };
  },
  created() {
    // console.log("this.toolsData :", this.toolsData);
  },
  methods: {
    // 导出Excel
    exportExcel() {
      this.$emit("hasOperation");
      setTimeout(() => {
        const wb = XLSX.utils.table_to_book(
          document.querySelector("#tableExcel")
        );
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            this.toolsData.title + ".xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        this.$emit("hasOperation");
        return wbout;
      }, 500);
    },
    test(type) {
      const showBtn = this.toolsData.oBtnShow;
      for (let i = 0; i < showBtn.length; i++) {
        const oBtn = showBtn[type];
        if (type === i) {
          return oBtn["btn" + type];
        } else {
          return oBtn["btn" + type];
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card-tools-btn {
  float: right;
  margin-top: -8px;
  margin-left: 10px;
}
</style>
